<template>
  <RouterView v-if="isLoginOrReg"> </RouterView>
  <div v-else>
    <header><HeaderVue></HeaderVue></header>
    <aside :class="{ collapse: isCollapse }">
      <Asider ref="asider"></Asider>
    </aside>
    <main :class="{ collapse: isCollapse }">
      <RouterView v-slot="{ Component }">
        <Transition name="main">
          <component :is="Component"></component>
        </Transition>
      </RouterView>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import Asider from "@/components/Asider.vue";
import HeaderVue from "@/components/Header.vue";
import { useRoute } from "vue-router";
import { watch } from "vue";
const route = useRoute();

const asider = ref();
//使用计算属性，让asider有值了之后跟着变化，默认是未展开状态
const isCollapse = computed(() => {
  if (!asider.value) {
    return false;
  }
  return asider.value.isCollapse;
});

//使用侦听器，让isLoginOrReg先为true，不加载header，之后再根据route进行计算。
const isLoginOrReg = ref(true);
watch(route, () => {
  isLoginOrReg.value = route.path === "/login" || route.path === "/register";
});

// const isLoginOrReg = computed(() => {
//   return route.path === "/login" || route.path === "/register";
// });
</script>

<style scoped>
header {
  background-color: #d9afd9;
  background-image: linear-gradient(312deg, #d9afd9 0%, #97d9e1 100%);
  position: fixed;
  width: 100vw;
  height: 50px;
  top: 0;
  z-index: 1000;
}

aside {
  position: fixed;
  top: 50px;
  color: gray;
  font-size: small;
  font-family: 微软雅黑;
  background-color: #97d9e1;
  width: 150px;
  height: calc(100vh - 50px);
}

aside.collapse {
  width: calc(
    var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2
  );
}

main {
  position: relative;
  top: 50px;
  left: 150px;
  width: calc(100vw - 150px);
}

main.collapse {
  left: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
  width: calc(
    100vw - (var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2)
  );
}

.main-enter-active {
  transition: all 0.3s ease-out;
}

.main-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.main-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}
.main-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
</style>
